<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name=viewport
    content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
  <meta name="referrer" content="no-referrer">
  <title>xgplayer</title>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: auto;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="mse"></div>
  <script src="//cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
  <script src="//cdn.jsdelivr.net/npm/xgplayer-hls.js/browser/index.js" charset="utf-8"></script>
  <script>
    let player = new HlsJsPlayer({
      "id": "mse",
      "url": "",
      "playsinline": true,
      "whitelist": [
        ""
      ],
      "x5-video-player-type": "h5",
      "rotate": {
        "clockwise": false,
        "innerRotate": true
      }
    });
    fetch("http://www.27ce.cn/mhd/video/info?videoId=8").then(res => res.blob()).then(data => player.url = URL.createObjectURL(data));
  </script>
</body>

</html>